<!--csdn摘录别人的代码 -->
<template>
    <div
      v-if="this.$store.state.treeShow"
      style="height: 400px; padding-bottom: 10px"
    >
      <div class="treeHead" @click="reset()">
        <i class="el-icon-folder-opened"></i> 请选择资源分组
      </div>
      <div class="treeBox">
        <el-tree
          :data="this.$store.state.treeData"
          node-key="id"
          :indent="0"
          ref="tree"
          default-expand-all
          :expand-on-click-node="false"
          :props="defaultProps"
          class="tree"
          style="width: 100%"
          @node-click="handle"
        >
        </el-tree>
      </div>
    </div>
  </template>
  <script>
  import { getResourceGroupTree } from "@/api/zypz/zyfz";
  export default {
    data() {
      return {
        selectKey: "",
        // treeData: [],
        defaultProps: {
          children: "children",
          label: "name",
          value: "id",
        },
      };
    },
    created() {
      // 获取资源分组树结构
      this.getGroupTree();
    },
    methods: {
      getGroupTree() {
        getResourceGroupTree().then((response) => {
          var res = response.data;
          this.$store.commit("getTree", res);
          // this.treeData = response.data;
          // this.treeData[this.treeData.length - 1].disabled = true;
        });
      },
      handle(node) {
        // let isleaf = this.$refs.tree.setCheckedKeys();
        // console.log(isleaf,"ddddddd")
        let selectKey = "";
        let parent = [];
        if (node.children.length > 0) {
          this.$store.commit("getLeaf", "");
        } else {
          console.log("叶");
          selectKey = this.$refs.tree.getCurrentKey();
          parent = this.getParent(this.$refs.tree.data, selectKey);
          this.$store.commit("getLeaf", parent);
        }
        selectKey = this.$refs.tree.getCurrentKey();
        parent = this.getParent(this.$refs.tree.data, selectKey);
        // this.$store.commit("getLeaf", parent);
        this.$store.commit("getNode", parent);
        this.$store.commit("getNodeKey", selectKey);
      },
      // 获取选中节点的所有上父节点函数
      getParent(array, key) {
        let result = [];
        let toToo = true;
        const catchData = (array, key) => {
          array.forEach((item) => {
            if (!toToo) return;
            result.push(String(item["name"]));
            if (item["id"] === key) {
              toToo = false;
            } else if (item["children"]) {
              catchData(item["children"], key);
            } else {
              result.pop();
            }
          });
          toToo && result.pop();
        };
        catchData(array, key);
        console.log(result, "result");
        return result;
      },
      // 制空选中的资源分组
      reset() {
        let selectKey = "";
        let parent = [];
        // this.$store.commit("getLeaf", parent);
        this.$store.commit("getNode", parent);
        this.$store.commit("getNodeKey", selectKey);
      },
    },
  };
  </script>
  <style lang="scss" scoped>
  /**
  **箭头
  **/
  // 没有展开且有子节点
  .el-tree ::v-deep .el-icon-caret-right:before {
    background: url("~@/assets/tree/arrow-right1.png") no-repeat 0 0;
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 3px;
    background-size: 8px 12px;
  }
  // 已经展开且有子节点
  .el-tree
    ::v-deep
    .el-tree-node__expand-icon.expanded.el-icon-caret-right:before {
    background: url("~@/assets/tree/arrow-right1.png") no-repeat 0 0;
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-size: 8px 12px;
  }
  // 没有子节点
  .el-tree ::v-deep.el-tree-node__expand-icon.is-leaf::before {
    background: none;
  }
  // 添加引导线
  .treeBox {
    width: 100%;
  }
  .treeBox ::v-deep .el-tree > .el-tree-node:after {
    border-top: none;
  }
  .tree ::v-deep .el-tree-node {
    position: relative;
  }
   
  .tree ::v-deep .el-tree-node__children {
    padding-left: 15px;
  }
   
  .tree ::v-deep .el-tree-node :last-child:before {
    height: 38px;
  }
   
  .tree ::v-deep .el-tree > .el-tree-node:before {
    border-left: none;
  }
   
  .treeBox ::v-deep .el-tree > .el-tree-node:after {
    border-top: none;
  }
   
  .tree ::v-deep .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
   
  .tree ::v-deep .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }
   
  .tree ::v-deep .el-tree-node:before {
    border-left: 1px dashed #ffffff;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }
   
  .tree ::v-deep .el-tree-node:after {
    border-top: 1px dashed #ffffff;
    height: 20px;
    top: 12px;
    width: 12px;
  }
   
  // 添加图标
  .el-tree ::v-deep .el-tree-node__content .el-tree-node__label {
    color: black;
    padding-left: 22px;
    background: url("../../../src/assets/tree/icon11.png") no-repeat 0 3px;
    background-size: 13px 13px;
  }
  .el-tree ::v-deep .el-tree-node__children .el-tree-node__label {
    padding-left: 22px;
    background: url("../../../src/assets/tree/icon21.png") no-repeat 0 3px;
    background-size: 13px 13px;
  }
  .el-tree
    ::v-deep
    .el-tree-node__children
    .el-tree-node__children
    .el-tree-node__label {
    padding-left: 22px;
    background: url("../../../src/assets/tree/icon31.png") no-repeat 0 3px;
    background-size: 13px 13px;
  }
  .el-tree
    ::v-deep
    .el-tree-node__children
    .el-tree-node__children
    .el-tree-node__children
    .el-tree-node__label {
    padding-left: 22px;
    background: url("../../../src/assets/tree/icon41.png") no-repeat 0 3px;
    background-size: 13px 13px;
  }
  .el-tree
    ::v-deep
    .el-tree-node__children
    .el-tree-node__children
    .el-tree-node__children
    .el-tree-node__children
    .el-tree-node__label {
    padding-left: 22px;
    background: url("../../../src/assets/tree/icon51.png") no-repeat 0 3px;
    background-size: 13px 13px;
  }
  .tree {
    color: #fff;
    border: 1px solid #3a90f2;
    background-color: #3a90f2;
  }
  .treeBox {
    width: 100%;
    margin: 0 auto;
    overflow: auto;
    height: 360px;
    // overflow-x: auto;
    // overflow-y: auto;
  }
  .el-tree {
    min-width: 100%;
    display: inline-block !important;
  }
  ::v-deep .el-tree-node__content:hover {
    // background-color: #2181f5;
  }
  ::v-deep .el-tree-node__content:is-active {
    // background-color: #2181f5;
  }
  ::v-deep .el-tree-node:focus > .el-tree-node__content {
    // background-color: #2181f5;
  }
  ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }
  ::-webkit-scrollbar-thumb {
    background-color: #409eff;
    border-radius: 5px;
  }
  ::-webkit-scrollbar-corner {
    background-color: inherit;
  }
  .treeHead {
    text-align: center;
    color: #fff;
    font-size: 14px;
    padding: 10px;
    align-items: center;
    border: 1px solid #196eff;
    background-color: #196eff;
  }
  // 修改点击>小图标展开收起区域往下问题
  // ::v-deep .tree[data-v-96a3565e] .el-tree-node:after {
  //   height: 0px !important;
  //   top: 0px !important;
  //   width: 0px !important;
  // }
  </style>